﻿<!DOCTYPE html>
<html>
	<head>
		<title>Images layouts with freewall</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<meta name="description" content="Freewall demo for image layout" />
		<meta name="keywords" content="javascript, dynamic, grid, layout, jquery plugin, images layouts"/>
		<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../freewall.js"></script>
		<style type="text/css">
			.free-wall {
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<div class='header'>
			<div class="clearfix">
				<div class="float-left">
						<h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
						<div class='target'>Creating dynamic grid layouts.</div>
				</div>
			</div>
		</div>
		<div id="freewall" class="free-wall"></div>

		<script type="text/javascript">
			var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(i/photo/{index}.jpg)'></div>";
			var w = 1, html = '', limitItem = 49;
			for (var i = 0; i < limitItem; ++i) {
				w = 200 +  200 * Math.random() << 0;
				html += temp.replace(/\{height\}/g, 200).replace(/\{width\}/g, w).replace("{index}", i + 1);
			}
			$("#freewall").html(html);

			var wall = new Freewall("#freewall");
			wall.reset({
				selector: '.cell',
				animate: true,
				cellW: 20,
				cellH: 200,
				onResize: function() {
					wall.fitWidth();
				}
			});
			wall.fitWidth();
			// for scroll bar appear;
			$(window).trigger("resize");
		</script>
	</body>
</html>
